import React, { useState, useEffect } from "react"
import "./planList.less"
import { Link } from 'umi'
import { observer } from 'mobx-react-lite'
import { inteplanListAllList,inteplanListQuery } from "@/utils/interface"
import useStore from "@/context/useStore"
import { Table, Button,  Spin } from 'antd';
import { SearchOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons'
const PlanList: React.FC = () => {

    let columns = [
        {
            title: '班级/计划',
            render: (row: inteplanListAllList) =>
                <div className='title_jihua'>
                    <span style={{ fontSize: '14px' }}>{row.className}</span><br />
                    <span style={{ fontSize: '16px' }}>{row.planname}</span>
                </div>

        }, {
            title: '时间',
            render: (row: inteplanListAllList) =>
                <div className='title_time'>
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#b2b7c6' }}>距结束还剩:&nbsp;&nbsp;</span>
                    <span style={{ fontSize: '18px', fontWeight: 500, color: '#303849' }}>{row.surplusTime.substr(0, 1) == '-' ? '0时0分0秒' : row.surplusTime}</span><br />
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#b2b7c6' }}>开始:&nbsp;&nbsp;</span>
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#6b6b80' }}>{row.begintime}</span><br />
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#b2b7c6' }}>结束:&nbsp;&nbsp;</span>
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#6b6b80' }}>{row.endtime}</span><br />
                </div>
        }, {
            title: '进度',
            render: (row: inteplanListAllList) =>
                <div className='title_jindu'>
                    <span style={{ fontSize: '24px', fontWeight: 500}} 
                    className={row.progress == '0' ? 'avtive':'span'}
                    >{row.progress}%</span>
                </div>
        }, {
            title: '操作',
            render: (row: inteplanListAllList) =>
                <div className='title_caozuo'>
                    <EyeOutlined style={{ fontSize: '18px', padding: '0px 10px', color: '#679cf6' }} />
                    <DeleteOutlined style={{ fontSize: '18px', padding: '0px 10px', color: '#679cf6' }} 
                    onClick={()=>setDeletitle(row.id)} />
                </div>
        },
    ];

    let arr = ['未开始','进行中','已结束']
    const [titleindex, settitleindex] = useState('') //tab  下标
    const [carIndex, setcarIndex] = useState(0) //tab  下标
    const [title, settitle] = useState('')
    const [searchName, setsearchName] = useState('')
    const [Deletitle, setDeletitle] = useState('')

    let { planListSkill } = useStore()
    console.log(Deletitle)
    useEffect(() => {
        let queryParams:inteplanListQuery = {
            classId:'',
            searchName:'',
            ifFinished: 0,
            pageNum: 1,
            pageSize: 10
        }
        planListSkill.planListItem()
        planListSkill.planListAllList(queryParams)
    }, [])
    useEffect(() => {
        // console.log(123);
        planListSkill.planListAllListNull();
        let queryParams:inteplanListQuery = {
            classId:'',
            searchName:'',
            ifFinished: 1,
            pageNum: 1,
            pageSize: 10
        }
        queryParams = {...queryParams,ifFinished:carIndex,searchName}

        planListSkill.planListAllList(queryParams)
    }, [titleindex,carIndex,searchName])



    return (
        <div className='planlist'>
            <div className='totaltitle'>
                <div className='title_son'>
                    <span>计划</span>&nbsp;&nbsp;/&nbsp;&nbsp; <span>计划管理</span>
                </div>
            </div>
            <div className='subtitle'>
                <div className='title_type1'>
                    <div className='title_son'>
                        <div className='title_theme'>班级:</div>
                        <div className='subject_name'>
                            <span className={titleindex == ''?'active all_name':'all_name'} onClick={() => settitleindex('')}  >全部</span>
                            {
                                planListSkill.planlistItem.map(item => {
                                    return (
                                        <span className={titleindex == item.id?'active all_name_item':'all_name_item'} key={item.id} 
                                        onClick={() => settitleindex(item.id)} >{item.classname}</span>
                                    )
                                })
                            }
                        </div>

                    </div>
                </div>
                <div className='title_type2'>
                    <div className='table_item'>
                        <div className='div_span'>
                            {
                                arr.map((item,index)=>{
                                    return <span key={index} onClick={() => setcarIndex(index)}
                                    className={carIndex==index?`active${index}`:`span${index}`} >{item}</span>
                                })
                            }
                        </div>
                        <div className='div_input_button'>
                            <Link to='/teachers/addPlan'>
                                <Button className='div_button' type="primary">+添加计划</Button>
                            </Link>
                            
                            <div className='divs_quan'>
                                <input type="text" className='div_input' placeholder='搜索计划/项目/任务'
                                value={title} onChange={e=>settitle(e.target.value)}
                                onKeyDown={e=>{if(e.keyCode == 13){setsearchName(title)}}} />
                                <i className='div_i'><SearchOutlined onClick={()=>setsearchName(title)}/></i>
                            </div>

                        </div>
                    </div>
                    <div className='table_list'>
                         {
                            planListSkill.planlistallList.length == 0 ? 
                            <div className="example"><Spin /> <Spin /> <Spin /> </div>:
                            <Table rowKey='id' className='tables' columns={columns} dataSource={planListSkill.planlistallList} size="middle" />
                        }
                        
                    </div>
                </div>
            </div>
        </div>
    )
}

export default observer(PlanList)